import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('app')
import './login.less'
/**
 * 登录
 */
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        user_id: '',
        password: ''
      },
      loading: false,
      rules: {
        user_id: [
          { required: true, message: '请输入登录账户', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' }
        ]
      },  // 规则
    }
  },
  computed: {
    ...mapState(['logoUrl'])
  },
  render(h) {
    // 表单
    const Form = () => {
      // 提交
      const submitForm = async() => {
        const callback = async(valid) => {
          if (!valid) return false
          try {
            this.loading = true
            // await this.$store.dispatch('auth/login', this.loginForm)
            this.$store.commit('auth/setToken', { token: 'JSONWEBTOKEN' })
            this.$router.push({ path: '/' })
          } finally {
            this.loading = false
          }
        }
        await this.$refs.loginForm.validate(callback)
      }
      // 监听键盘
      const onKeyup = ({ key }) => {
        if (key !== 'Enter') return
        submitForm()
      }
      return (
        <el-form ref="loginForm" props={{ model: this.loginForm, rules: this.rules }} class="login-form">
          <el-form-item prop="user_id">
            <el-input
              value={ this.loginForm.user_id }
              onInput={ v => this.loginForm.user_id = v }
              placeholder="请输入登录账户"
              nativeOnKeyup={onKeyup}
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              value={this.loginForm.password}
              onInput={v => this.loginForm.password = v}
              placeholder="请输入登录密码"
              show-password
              nativeOnKeyup={onKeyup}
            />
          </el-form-item>
          <el-button type="primary" loading={this.loading} class="login-btn" onClick={submitForm}>登 录</el-button>
        </el-form>
      )
    }
    // 中心
    const Center = () => {
      return (
        <div class="login-content">
          <div class="login-item">
            <img class="login-image" src="https://hr.xcxd.cn/image/login_pic.png" />
          </div>
          <div class="login-item">
            <img class="login-logo" src={this.logoUrl} />
            <Form />
          </div>
        </div>
      )
    }
    // 底部
    const Footer = () => {
      return (
        <div class="login-footer">
          <span class="login-footer-item">Copyright © 2020</span>
          <span class="login-footer-item">kangyana</span>
          <a class="login-footer-item login-link" href="http://www.beian.miit.gov.cn" target="_blank">京ICP备号</a>
        </div>
      )
    }

    return (
      <div class="login">
        <Center />
        <Footer />
      </div>
    )
  }
}
